<template>
	<view class="rui-lines-max">
		<view class="rui-lines-max_item" v-for="index in 15" :key="index">
			<image class="rui-lines-max_item_img" src="/static/images/lines.jpg" mode="center"></image>
			<view class="rui-lines-max_item_info">
				<view class="rui-lines-max_item_info_title">
					伊犁7日游（头等舱）—S101 独山子大峡谷 赛里木湖 库尔德宁/恰西 那拉提草原 独库公路 唐布拉孟克特古道
				</view>
				<view class="rui-lines-max_item_info_bottom">
					<view class="rui-lines-max_item_info_bottom_enroll">
						20312报名
					</view>
					<view class="rui-lines-max_item_info_bottom_box">
						<view class="rui-lines-max_item_info_bottom_box_cost">8999</view>
						<view class="rui-lines-max_item_info_bottom_box_gap"></view>
						<view class="rui-lines-max_item_info_bottom_box_price">5999</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>

</script>

<style lang="scss" scoped>
	.rui-lines-max {
	
		&_item {
			margin: 20rpx;
			padding: 20rpx;
			background: #fff;
			border-radius: 20rpx;
			display: flex;
			justify-content: space-between;

			&:active {
				box-shadow: 0 2rpx 20rpx rgba(0, 0, 0, .1);
			}

			&_img {
				width: 200rpx;
				height: 220rpx;
				border-radius: 10rpx;
			}

			&_info {
				width: calc(100% - 220rpx);

				&_title {
					display: -webkit-box;
					overflow: hidden;
					text-overflow: ellipsis;
					font-weight: 700;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
					margin-bottom: 60rpx;
				}

				&_bottom {
					display: flex;
					align-items: center;
					justify-content: space-between;


					&_enroll {
						font-size: 22rpx;
						color: #999;
					}

					&_box {
						display: flex;
						background: #f00;
						padding: 6rpx 25rpx;
						color: #fff;
						border-radius: 50rpx;
						overflow: hidden;
						font-size: 24rpx;
						position: relative;

						&_price {
							text-align: center;
							font-weight: bold;

							&::before {
								content: "￥";
							}

							&::after {
								content: "达人价";
								font-size: 18rpx;
								display: block;
								font-weight: normal;
							}
						}

						&_cost {
							text-align: center;
							margin-right: 60rpx;
							font-weight: bold;

							&::before {
								content: "￥";
							}

							&::after {
								content: "原价";
								font-size: 20rpx;
								display: block;
								font-weight: normal;
							}


						}

						&_gap {
							content: "";
							display: block;
							width: 5rpx;
							background: #fff;
							height: 150rpx;
							position: absolute;
							right: calc(50% - 2rpx);
							top: -30rpx;
							transform: rotate(15deg);
						}
					}
				}
			}

		}
	}
</style>